<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery带多选和过滤功能的树状结构下拉框插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<link rel="stylesheet" href="css/style.css">
	<style type="text/css">
		.htmleaf-container{
			width: 100%;
		}
		.htmleaf-content{
			width: 70%;
			height: 400px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>jQuery带多选和过滤功能的树状结构下拉框插件 <span>Multi-Select Drop Down Tree Plugin With jQuery</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Form/201909095786.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="htmleaf-content">
			<div style="width: 50%; float: left; box-sizing: border-box; padding: 20px;">
			<h3>多选</h3>
				<input type="text" id="justAnInputBox" />
			</div>

			<div style="width: 50%; float:left; box-sizing: border-box; padding: 20px;">
				<h3>单选（带过滤功能）</h3>
				<input type="text" id="justAnotherInputBox" placeholder="带过滤功能"/>
			</div>
		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Form/201906265708.html">
				  <img src="related/1.jpg" width="300" alt="jQuery多选下拉框插件"/>
				  <h3>jQuery多选下拉框插件</h3>
				</a>
				<a href="http://www.htmleaf.com/jQuery/Form/201806225188.html">
				  <img src="related/2.jpg" width="300" alt="Bootstrap和chosen集成jQuery下拉框插件"/>
				  <h3>Bootstrap和chosen集成jQuery下拉框插件</h3>
				</a>
		</div>
	</div>
	
	<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
	<script src="js/icontains.js"  type="text/javascript"></script>
	<script src="js/comboTreePlugin.js"  type="text/javascript"></script>
	<script type="text/javascript">

var SampleJSONData = [
    {
        id: 0,
        title: 'choice 1  '
    }, {
        id: 1,
        title: 'choice 2',
        subs: [
            {
                id: 10,
                title: 'choice 2 1'
            }, {
                id: 11,
                title: 'choice 2 2'
            }, {
                id: 12,
                title: 'choice 2 3'
            }
        ]
    }, {
        id: 2,
        title: 'choice 3'
    }, {
        id: 3,
        title: 'choice 4'
    }, {
        id: 4,
        title: 'choice 5'
    }, {
        id: 5,
        title: 'choice 6',
        subs: [
            {
                id: 50,
                title: 'choice 6 1'
            }, {
                id: 51,
                title: 'choice 6 2',
                subs: [
                    {
                        id: 510,
                        title: 'choice 6 2 1'
                    }, {
                        id: 511,
                        title: 'choice 6 2 2'
                    }, {
                        id: 512,
                        title: 'choice 6 2 3'
                    }
                ]
            }
        ]
    }, {
        id: 6,
        title: 'choice 7'
    }
];
var comboTree1, comboTree2;

jQuery(document).ready(function($) {

		comboTree1 = $('#justAnInputBox').comboTree({
			source : SampleJSONData,
			isMultiple: true
		});

		comboTree2 = $('#justAnotherInputBox').comboTree({
			source : SampleJSONData,
			isMultiple: false
		});
});


</script>
</body>
</html>